<template>
  <div>
    <el-card>
      <!-- 搜索栏 -->
      <SearchForm
        :form-option="formOption"
        :show-btn="true"
        :btn-list="btnList"
        v-model="formOption.formData"
        label-width="90px"
      />

      <!-- 数据表格 start -->
      <PageTable
        :loading="loading"
        :data="dataSource"
        :columns="columns"
        :options="options"
        @selectChange="selectChange"
      />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getReplenisList"
      />
      <!-- 数据表格 end -->
    </el-card>
  </div>
</template>

<script>
import { RUSH_PAYWAY, RUSH_INVOICE_STATUS, RUSH_INVOICE_STATUS_COLOR } from '@/enum/user'
import { mapState, mapMutations } from 'vuex'
import { export2Excel } from '@/utils/export'

export default {
  name: 'CompanyInfoReplenishLog',
  components: {},
  props: {},
  data() {
    return {
      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'daterange',
            label: '充值时间',
            value: 'time',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            clear: () => {
              // this.getList()
            }
          }
        ],
        formData: {}
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getReplenisList()
          }
        },
        {
          label: '导出',
          onClick: () => {
            this.exportFile()
          }
        }
      ],

      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,

      // 表格加载
      loading: true,
      // 表格配置
      options: {
        border: true,
        select: true
      },
      // 表格列配置
      columns: [
        {
          prop: 'rechargeNo',
          label: '订单号',
          render: (h, { row }) => {
            return (
              <div>
                <p>{row.rechargeNo}</p>
                {row.payNo ? (
                  <p class="ft-14" style="color:#409eff">
                    支付流水号：{row.payNo}
                  </p>
                ) : (
                  ''
                )}
              </div>
            )
          }
        },
        {
          label: '充值金额',
          prop: 'payAmount',
          render: (h, { row }) => {
            return (
              <div>
                {row.payWay === 20 ? '-' : ''}￥{row.payAmount}
              </div>
            )
          }
        },
        {
          label: '获得积分',
          prop: 'rechargeIntegral',
          render: (h, { row }) => {
            return (
              <div>
                <div>
                  {row.payWay === 20 ? '-' : ''}
                  {row.rechargeIntegral}积分
                </div>
                {row.giftIntegral && row.giftIntegral > 0 ? (
                  <div>+{row.giftIntegral}积分(赠送)</div>
                ) : (
                  ''
                )}
              </div>
            )
          }
        },
        {
          label: '支付方式',
          prop: 'payWay',
          render: (h, { row }) => {
            return (
              <div>
                <div>{RUSH_PAYWAY[row.etpRechargeType]}</div>
                {row.etpRechargeType === 20 || row.etpRechargeType === 30 ? (
                  <div>操作员：{row.createdUser}</div>
                ) : (
                  ''
                )}
              </div>
            )
          }
        },
        {
          label: '是否开票',
          prop: 'invoiceStatus',
          render: (h, { row }) => {
            const color = `color:${RUSH_INVOICE_STATUS_COLOR[row.invoiceStatus]}`
            return (
              <div>
                <div style={color}>{RUSH_INVOICE_STATUS[row.invoiceStatus]}</div>
                {row.isInvoice === 2 ? (
                  <p
                    class="text-link-blue"
                    onClick={() => {
                      this.$emit('changeInvoice')
                    }}
                  >
                    开票记录
                  </p>
                ) : (
                  ''
                )}
                {row.invoiceStatus ? (
                  <p
                    class="text-link-blue"
                    onClick={() => {
                      const orderId = row.invoiceStatus === 1 ? row.rechargeNo : ''
                      this.$emit('changeInvoice', orderId)
                    }}
                  >
                    {row.invoiceStatus === 1 ? '去处理' : '开票记录'}
                  </p>
                ) : (
                  ''
                )}
              </div>
            )
          }
        },
        {
          label: '到账状态',
          prop: 'isPay',
          render: (h, { row }) => {
            const type = row.isPay ? '已到账' : '在途'
            return <div>{type}</div>
          }
        },
        { prop: 'payTime', label: '充值时间' }
      ],
      // 表格源数据
      dataSource: [],
      // 选择列表
      selectList: []
    }
  },
  computed: {
    // 企业主资料刷新充值记录列表
    ...mapState('base', ['etpRefreshTopLog'])
  },
  watch: {
    etpRefreshTopLog: {
      async handler(newValue) {
        if (newValue) {
          await this.getReplenisList()
          this.SET_TOP_REFRESH(false)
        }
      }
    }
  },
  created() {
    this.getReplenisList()
  },
  mounted() {},
  methods: {
    // 企业主资料刷新充值记录列表刷新写入
    ...mapMutations('base', ['SET_TOP_REFRESH']),
    // 获取充值记录列表
    async getReplenisList() {
      try {
        // 参数整理
        const params = {
          etpId: this.$route.query.id,
          ...this.listQuery,
          startTime: this.formOption.formData?.time?.[0] ?? '',
          endTime: this.formOption.formData?.time?.[1] ?? ''
        }
        // 发送请求
        const {
          data: { records, total }
        } = await this.$http.finance.recharge.list({ params })
        this.dataSource = records
        this.total = total
        this.loading = false
      } catch (error) {
        console.log('getReplenisList', error)
      }
    },

    /**
     * 勾选列表行数据
     * @parma {Array} rows 选中行
     */
    selectChange(rows) {
      this.selectList = rows
    },

    // 点击导出
    exportFile() {
      if (!this.selectList.length) return this.$message.error('请选择要导出的数据')
      // 表头设置
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      headerData.splice(1, 0, '支付单号')
      headerData.splice(4, 0, '赠送积分')
      // console.log(headerData)
      // 表格数据字段
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      filterData.splice(1, 0, 'payNo')
      filterData.splice(4, 0, 'giftIntegral')
      // console.log(filterData)
      // 表格数据
      const tableData = this.selectList.map(item => {
        return {
          ...item,
          payNo: item.payNo || '暂无',
          etpRechargeType: RUSH_PAYWAY[item.etpRechargeType],
          invoiceStatus: RUSH_INVOICE_STATUS[item.invoiceStatus],
          isPay: item.isPay ? '已到账' : '在途'
        }
      })
      // console.log(tableData)
      export2Excel(headerData, tableData, filterData, '充值记录', () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
